<template>
  <div class="login-bigbox">
    <div class="login-container">
      <div class="left-box">
        <!-- <div class="left-container">xxxxx商城</div> -->
        <div class="left-container">
          <p>啥都有</p>
          <p>OA系统</p>
        </div>
        <!-- <p>{{ ruleForm.adminname }}</p> -->
      </div>
      <div class="right-box">
        <!-- <div class="title">欢迎进入xxxxx商城后台登录系统</div> -->
        <div class="title">Welcome</div>
        <div class="login-form-box">
          <el-form :ref="'loginForm'" :model="ruleForm" :rules="rules" label-width="70px" class="login-ruleForm">
            <el-form-item label="用户名" prop="adminname" class="form-input">
              <el-input v-model="ruleForm.adminname">
                <template #prefix>
                  <el-icon><User /></el-icon>
                  <!-- 人图标 -->
                </template>
              </el-input>
              <!-- {{ loginForm }} -->
            </el-form-item>
            <!-- <el-form-item label="密码" prop="password" class="form-input">
              <el-input type="password" v-model="ruleForm.password">
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item> -->

            <el-form-item label="密码" prop="password" class="form-input">
              <div class="pw">
                <el-input show-password type="password" v-model="ruleForm.password">
                  <template #prefix>
                    <el-icon><Lock /></el-icon>
                    <!-- 锁图标 -->
                  </template>
                </el-input>
              </div>
            </el-form-item>

            <el-button type="primary" class="login-button" @click="subLoginInfo">登录</el-button>
            <el-button class="login-button" @click="resetForm">重置</el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { loginDataApi } from '../../api/login';
  import { useRouter } from 'vue-router';
  import { ref } from 'vue';

  const loginForm = ref(null);

  // 声明
  const ruleForm = ref({
    adminname: '',
    password: '',
  });

  // 表单验证的格式
  const rules = ref({
    adminname: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 8, message: '用户名长度应为3-8位', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 10, message: '密码长度应为6-10位', trigger: 'blur' },
    ],
  });

  // 重置表单的方法
  const resetForm = () => {
    console.log(111);
    ruleForm.value = {
      adminname: '',
      password: '',
    };
  };

  // 调用路由
  const router = useRouter();
  const message = ref();

  // 提交表单的方法
  const subLoginInfo = () => {
    loginForm.value.validate(async isPass => {
      if (isPass) {
        try {
          const data = await loginDataApi(ruleForm.value);
          localStorage.setItem('token', data.token);
          localStorage.setItem('adminName', data.adminname);
          if (data.token) {
            console.log(111);
            router.replace({ name: 'home' });
          }
        } catch (error) {
          console.log(error);
        }
      }
    });
  };
</script>

<style lang="scss" spcoed>
  .login-bigbox {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom left, cornflowerblue, darkturquoise);
    font-weight: 600;
    .login-container {
      min-height: 300px;
      max-width: 40%;
      min-width: 380px;
      height: 60%;
      position: relative;
      top: 50% - 35%;
      right: -50% + 25%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 15px 15px 15px 15px;
      overflow: hidden;
      box-shadow: 2px 5px 5px 5px #aaa;
      // border: 1px solid red;
      // box-sizing: border-box;
      .left-box {
        // border: 1px solid black;
        // box-sizing: border-box;
        height: 100%;
        width: 40%;
        // background-color: darksalmon;
        position: relative;
        overflow: hidden;
        // background: linear-gradient(to top right,#20e6dc,#8aaae1e5);

        /* OA背景图url -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
        background-image: url(https://p6.itc.cn/q_70/images03/20210311/3e4c5b8e61414ebeba6c141490c2fa6a.jpeg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;

        .left-container {
          // min-width: 200px;
          // height: 400px;
          // line-height: 400px;
          text-align: center;

          color: #545a5c;
          -webkit-text-stroke: 0.5px #fff;
          font-size: 40px;
          text-shadow: 0 0 10px;

          position: absolute;
          // top: 0;
          bottom: 10px;
          left: 0;
          right: 0;
          margin: auto;
          //   background-color: antiquewhite;
        }
      }
      .right-box {
        // border: 1px solid yellow;
        // box-sizing: border-box;
        height: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        padding: 10px;
        background-color: white;

        .title {
          width: 100%;
          height: 120px;
          line-height: 170px;
          text-align: center;
          font-size: 50px;
          // background-color: white;
          font-weight: bold;
          // background-color: burlywood;
          // border: 1px solid aqua;

          font-style: oblique; //倾斜
          background-image: -webkit-linear-gradient(
            left,
            green,
            yellow,
            pink,
            blue,
            red 25%,
            green 35%,
            blue 50%,
            yellow 60%,
            red 75%,
            pink 85%,
            blue 100%
          ); //括号内可添加多种颜色，多种百分比   线性渐变
          -webkit-text-fill-color: transparent; //颜色填充 透明
          -webkit-background-clip: text; //背景颜色绘制区域
          animation: stream 15s infinite linear; //流动 15秒 循环 直线
          background-size: 200% 100%;
        }
        .login-form-box {
          width: 100%;
          height: 100%;

          .pointer {
            transition: all 0.3s;
            &:hover {
              cursor: pointer;
              color: #1c1c1c;
            }
          }

          .login-ruleForm {
            height: 100%;
            // background-color: white;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
            position: relative;
            // border: 1px solid violet;
            // box-sizing: border-box;
            // background-color: gainsboro;

            .login-button {
              width: 50%;
              // position: absolute;
              // top: 0;bottom: 0;
              // left: 0;right: 0;
              // margin: auto;
              margin-left: 20px;
            }
          }
        }
      }
    }
  }

  @media only screen and (max-width: 1000px) {
    .left-box {
      display: none;
    }
  }

  @keyframes stream {
    //匀速流动
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -100% 0;
    }
  }
</style>
